<!-- 通知公告 -->
<template>
	<zh-app style="font-family: '阿里巴巴普惠体'">
		<!-- 导航栏 -->
		<zh-navbar title="通知公告" color="#85a5ff" linear="right"  />
		<!-- 下拉筛选栏 -->
		<zh-filterMenu @close="onSearch" @click="filterClick" style="margin-top: 20rpx">
			<!-- 统筹区 -->
			<zh-filterMenu-item :title="data.selectArea.name">
				<zh-radio-group direction='customCol' @change="onSelect">
					<zh-radio :value="item.value" v-for="(item,index) in data.areaArr" :key="index" :custom="false">
						<template v-slot:default="{checked}">
							<view hover-class="opactiy-7"
								class="flex-1 flex-row flex flex-row-center-between" style="height: 76rpx;">
								<zh-text :color="checked?'primary':''" :label="item.name" />
								<tm-icon  color="primary" v-if="checked" name="tmicon-check" />
							</view>
						</template>
					</zh-radio>
				</zh-radio-group>
			</zh-filterMenu-item>
			<!-- 公告名称 -->
			<zh-filterMenu-item :height="650" title="名称搜索" un-icon="tmicon-stepmode" icon="tmicon-menu">
				<zh-input 
					:height="40" 
					v-model="data.title"
					placeholder="输入公告名称搜索" 
					placeholderStyle="text-align: center;" 
					showClear
				/>
			</zh-filterMenu-item>
		</zh-filterMenu>
		<!-- 主体 -->
		<z-paging
					ref="paging"
					:fixed="false"
					height="90vh"
					@query="onQueryList"
					v-model="data.noticeArr"
					:show-scrollbar="false"
				>
					<template v-slot:empty>
						<zh-result
							:showBtn="false"
							title="未搜索到公告信息"
							subTitle=""
						></zh-result>
					</template>
					<z-paging-cell
						v-for="(item, index) in data.noticeArr"
						:key="item.articleId"
					>
						<view class="card flex-bothends" @tap="gotoDetail(item.articleId)">
							<view style="width: 450rpx;">{{ item.title }}</view>
							<view >{{ item.publishTimeText }}</view>
						</view>
					</z-paging-cell>
				</z-paging>
		<zlb-footer></zlb-footer>
	</zh-app>
</template>
<script lang="ts" setup>
	import {ref, reactive,watch} from "vue";
	import { onLoad } from "@dcloudio/uni-app";

	// ------------------接收传入参数(组件)-------------------

	// ------------------变量区------------------------------
	const paging=ref();
	// 主数据
	const data = reactive({
		// 公告数组
		noticeArr: [] as any,
		title:null,
		// 当前选择的统筹区
		selectArea: {
			name: '全部',
			value: 'all'
		},
		// 统筹区
		areaArr: [
			{
				name: '全部',
				value: 'all'
			}
		],
		canSearch:false
	})

	// ------------------方法区------------------------------
	const filterClick=()=>{
		//下拉过滤点击时触发
		data.canSearch=false
	}
	// 下拉选择的回调
	const onSelect = (currentValue: any) => {
		for (const item of data.areaArr) {
			if(currentValue == item.value) {
				data.selectArea = item;
			}
		}
		data.canSearch=true
	}
	//名称搜索输入
	watch(
	  () => data.title,
	  () => {
	    data.canSearch=true
	  },
	  { deep: true }
	);
	//关闭筛选器的时候触发搜索
	function onSearch() {
		if(data.canSearch){
			uni.$tm.u.debounce(() => paging.value?.reload(), 500)
		}
	}
	
	const onQueryList = (pageNo :number, pageSize:number) => {
		//获取通知公告列表
		let params :any={}
		params.articleType = 'notice'
		params.showPosition = '20'
		params.areaCode=""
		if(data.title){
			params.title=data.title
		}
		
		if(data.selectArea.value!=='all'){
			params.areaCode=data.selectArea.value
		}
		
		params.pageNum = pageNo
		params.pageSize = pageSize
		$api.common.send.post("article0001",params).then((res:any)=>{
			paging.value?.complete(res.result.list || [])
		}).catch(() => {
			paging.value?.complete(false)
		})
	}
	//查询统筹区
	const queryArea=()=>{
		let params :any={}
		params.dictField = 'AREAEDU'
		$api.common.getDict.post(params).then((res:any)=>{
			
			if(res.result&&res.result.length>0){
				let areaArr :any=[]
				res.result.forEach((el:any) => {
					if(!el.parentKey||'#'===el.parentKey){
						let item={name:el.dictValue,value:'all'}
						data.selectArea=item
						areaArr.push(item)
					}else{
						let item={name:el.dictValue,value:el.dictKey}
						areaArr.push(item)
					}
				})
				data.areaArr=areaArr;
			}
			
		})
	}
	// 跳转至详情页
	const gotoDetail = (articleId: string) => {
		let params ={articleId:articleId}
		$router.push('/pages/edu/notice/noticeDetail',params);
	}
	// ------------------钩子函数----------------------------
	// 初始化
	onLoad((options: any) => {
		queryArea();
	})
</script>
<style lang="scss" scoped>
	.card {
		width: 670rpx;
		height: 80rpx;
		margin: 20rpx auto;
		padding: 20rpx;
		border-radius: 14rpx;
		box-shadow: rgb(51 51 51 / 15%) 0px 2px 6px;
		background-image: linear-gradient(to right, #FFFFFF, #d9d9d9);
	}
</style>